<template>
    <div>
        <el-descriptions>
        <el-descriptions-item label="订单编号">{{orderDetail.id}}</el-descriptions-item>
        <el-descriptions-item label="下单用户">{{orderDetail.user}}</el-descriptions-item>
        <el-descriptions-item label="订单费用">{{orderDetail.money}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
            <el-tag size="small">{{orderDetail.status}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{orderDetail.createTime}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{orderDetail.remarks}}</el-descriptions-item>
        <el-descriptions-item label="接收人">{{orderDetail.reciver}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{orderDetail.phone}}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{orderDetail.detail}}</el-descriptions-item>
    </el-descriptions>
    <div>
        <el-table
    :data="orderDetail.orderDetailVOS"
    height="250"
    border
    style="width: 100%">
    <el-table-column label="商品ID" prop="id"></el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="商品发布时间">
            <template slot-scope="{ row }">{{ format_date(row.pubDate) }}</template>
          </el-table-column>
          <el-table-column label="商品图片">
             <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.picture"
                :fit="contain"></el-image>
             </template>
          </el-table-column>
          <el-table-column label="商品类型" prop="typeName"></el-table-column>
          <el-table-column label="商品描述信息" prop="intro"></el-table-column>
          <el-table-column label="数量" prop="num"></el-table-column>
          <el-table-column label="费用" prop="sunMoney"></el-table-column>
  </el-table>
    </div>
    
</div>
    
</template>



<script>
import { detailApi } from '@/api/modules/shop/order'
import { format_tableData_null,format_dateTime,format_date } from '@/utils/formatter'
  export default {
    props: {
    id: {
      type: [Number, String],
      required: true
    }
},
    data() {
      return {
        orderDetail: {
            id: '',
            money: '',
            status: '',
            createTime: '',
            remarks: '',
            user: '',
            reciver: '',
            phone: '',
            detail: '',
            orderDetailVOS: []

        },
        tableData: []
      }
    },
    methods: {
        format_dateTime,
        format_date,
        async getDetail () {
      try {
        // const params = { id: this.id } 
        const res = await detailApi(this.id)
        this.orderDetail = res.data
        this.tableData = res.data.orderDetailVOS
        console.log("表格"+this.orderDetail.orderDetailVOS[0].name)
      } catch (err) {
        console.error(err)
      }
    }
    },
    mounted () {
        this.getDetail()
    }
  }
</script>